<template>
    <div class="CanvasImg" :style="{ width: width || '100%', height: height || width || '100%' }" @click.stop="handleClick">
        <canvas :id="id"></canvas><canvas :id="id + '2'"></canvas>
    </div>
</template>

<script>
// import SuperGif from './libgif.js';
export default {
    name: 'CanvasImg',
    props: {
        id: {
            type: String,
            default: `canvasImg${new Date().getTime()}`
        },
        src: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: ''
        },
        autoInit: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            canvas: null,
            canvas2: null,
            ctx2: null,
            ctx: null,
            tryCount: 0
        };
    },
    methods: {
        handleClick() {
            this.$emit('click');
        },
        isBase64(str) {
            if (str === '' || str.trim() === '') {
                return false;
            }
            try {
                return btoa(atob(str)) == str;
            } catch (err) {
                return false;
            }
        },
        getDPR() {
            return window.devicePixelRatio || 1;
        },
        renderImgWithCanvas(src) {
            if (src) {
                try {
                    isAnimatedGif(src, (callback) => {
                        if (callback) {
                            new canvasToGif({
                                id: this.id,
                                src,
                                canvas: this.canvas,
                                canvas2: this.canvas2,
                                ctx: this.ctx,
                                ctx2: this.ctx2
                            });
                        } else {
                            const img = new Image();
                            img.setAttribute('style', `width: auto;height: auto;position: fixed;top:400px;left:0;z-index:1;`);
                            // 如果不是base64格式的图片，则给图片加上跨域
                            if (!this.isBase64(src)) {
                                img.setAttribute('crossOrigin', 'anonymous');
                            }
                            img.src = src;
                            img.onload = () => {
                                let ix1 = 0,
                                    iy1 = 0,
                                    iw1 = img.width / 2,
                                    ih1 = img.height,
                                    ix2 = img.width / 2,
                                    iy2 = 0,
                                    iw2 = img.width / 2,
                                    ih2 = img.height;
                                this.ctx.drawImage(img, ix1, iy1, iw1, ih1, 0, 0, this.canvas.width, this.canvas.height);
                                this.ctx2.drawImage(img, ix2, iy2, iw2, ih2, 0, 0, this.canvas.width, this.canvas.height);
                                console.log(this.id, 'canvas图片绘制完成');
                            };
                        }
                    });
                } catch (error) {
                    console.log('canvasImg绘制错误', error);
                }
            }
        },
        init() {
            this.$nextTick(() => {
                this.canvas = document.getElementById(this.id);
                this.canvas2 = document.getElementById(`${this.id}2`);
                console.log('获取画布对象', this.id, this.canvas, this.canvas2);
                if (!this.canvas || !this.canvas2) {
                    this.tryCount++;
                    if (this.tryCount > 5) return;
                    console.log('尝试重新获取画布对象', this.id);
                    setTimeout(() => {
                        this.init();
                    }, 1000);
                } else {
                    const father = this.canvas.parentNode;
                    const dpr = this.getDPR();
                    console.log('father' + this.id, father.clientWidth, father.clientHeight);
                    this.canvas.width = (father.clientWidth / 2) * dpr; //不要有单位
                    this.canvas.height = father.clientHeight * dpr;
                    this.canvas.style = `width:${father.clientWidth / 2}px;height:${father.clientHeight}px;`;
                    this.canvas2.width = (father.clientWidth / 2) * dpr; //不要有单位
                    this.canvas2.height = father.clientHeight * dpr;
                    this.canvas2.style = `width:${father.clientWidth / 2}px;height:${father.clientHeight}px;`;
                    this.ctx = this.canvas.getContext('2d', this);
                    this.ctx2 = this.canvas2.getContext('2d', this);
                    import('./canvasToGif').then(() => {
                        this.renderImgWithCanvas(this.src);
                    });
                }
            });
        }
    },
    watch: {
        src(val) {
            if (!this.id) this.init();
            this.renderImgWithCanvas(val);
        }
    },
    mounted() {
        if (this.autoInit) this.init();
    }
};
</script>
<style lang="scss" scoped>
.CanvasImg {
    display: flex;
    flex-direction: row;
}
</style>
